<template>
	<div>
		<!--搜索框-->
		<div class="seachBox">
			<form class="bs-example bs-example-form" role="form">
				<div class="input-group  bgc-fff">
					<span class="input-group-addon">
          	<img src="../assets/sou.jpg"/>
          </span>
					<input type="text" class="mustInput" placeholder="搜索">
				</div>
			</form>
		</div>
		<!--搜索框end-->
		<!--列表-->
		<!--mescroll滚动区域的基本结构-->
		<div id="mescroll" class="mescroll" ref="dc">
			<div id="search">
				<ul class="list-group school_list">
					<li class="list-group-item" v-for="item in school" :key="item.id">
						<img class="house" src="../assets/house.jpg" />
						<div class="school_ads">
							<router-link :to="{ name: 'show' , params: {id: item.id }}">
								<!-- name 路由名称  params 请求参数-->
								<p class="p_first">{{item.province_text}}{{item.city_text}}{{item.area_text}}{{item.name}}</p>
								<p class="p_second">{{item.address}}{{item.id}}</p>
							</router-link>
						</div>
						<span class="pull-right required">
		        	<img style="width: 0.4rem;height: 0.4rem;margin-left: 0.2rem;" src="../assets/dao.png"/>
		        	<p style="font-size: 0.28rem;color: #bbbbbb;">到这去</p>
		        </span>
					</li>
				</ul>
			</div>
		</div>
		<!--列表end-->
		<!--底部-->
		<CommonFooter></CommonFooter>
		<!--底部end-->
	</div>

</template>

<script>
	import Vue from 'vue'
	import MeScroll from 'mescroll.js'
	import 'mescroll.js/mescroll.min.css'
	import CommonFooter from './CommonFooter'
	/* eslint-disable */
	export default {
		name: 'search',
		data() {
			return {
				newnum: 1,
				//				mescroll: null, //mescroll实例对象
				school: [] //列表数据
			}
		},
		created() {
			this.autoList()
		},
		mounted() {
			this.$store.dispatch('getSchool')
			//创建MeScroll对象
			this.mescroll = new MeScroll("mescroll", { //在vue的mounted生命周期初始化mescroll,确保此处配置的id能够被找到
				down: {
					use: true,
					auto: true, // 是否在初始化完毕之后自动执行下拉回调callback; 默认true
					callback: this.downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
				},
				up: {
					auto: false,
					callback: this.upCallback,
					page: {
						num: this.newnum,
						//						num: 1,
						size: 10,
						time: null
					},
					isBounce: true,
					htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">正在拼命加载..</p>',
					htmlNodata: '<p class="upwarp-nodata">-- 没有更多数据 --</p>'
				}

			})

		},
		computed: {
			//			school() {
			//				return this.$store.state.index.school
			//			}
		},
		components: {
			CommonFooter
		},
		methods: {
			autoList() {
				var sessionNum = sessionStorage.getItem("newnum");
				//先判断本地存储中有无这个值,如果没有,则为第一次上拉,否则则为之前的上拉页数(此处为之前的上拉判断)
				if(sessionNum != null) {
					//将本地存储的上拉页数存储到本地数据中（data里面）
					this.newnum = sessionNum
					console.log(this.newnum)
				}
				var sessionSchool = sessionStorage.getItem("newschool");
				if(sessionSchool != null) {
					//获取session里面存储的数据，并转换为json格式
					this.school = JSON.parse(sessionSchool)
				} else {
					Vue.axios.get('https://oa.fc62.com/api/school/getSchoolList/page/1').then(response => {
						let arr = response.data.data;
						for(var x in arr) {
							this.school.push(arr[x])
						}
						//						this.school = arr;
					})
				}
				//				var scrollTop1 = sessionStorage.getItem("scrollTop");
				//				console.log(scrollTop1)
				//				if(scrollTop1 != null) {
				//					 console.log(this.$refs)
				//					this.$refs.dc.scrollTop=scrollTop1;
				//				}
				console.log(this.school.length)
				var schoolNum = this.school.length + "";
				var str = schoolNum.substr(schoolNum.length - 1);
				console.log(str)
				if(str != 0) {
					schoolNum = schoolNum.substring(0, schoolNum.length - 1)
					console.log(parseInt(schoolNum) + 1)
					sessionStorage.setItem("newnum", parseInt(schoolNum) + 1);
				}

			},
			//上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
			upCallback(page) {
				//联网请求
				//先判断本地存储中有无这个值,如果没有,则为第一次上拉,否则则为之前的上拉页数(此处为之前的上拉判断)
				if(sessionNum != null) {
					page.num = this.newnum
					this.newnum++
						console.log("page.num========" + page.num)
				}
				var sessionNum = sessionStorage.getItem("newnum");
				Vue.axios.get("https://oa.fc62.com/api/school/getSchoolList/page/" + page.num).then((response) => {
					//请求的列表数据
					let arr = response.data.data;

					//如果是第一页需手动制空列表
					//					if(page.num == 1) this.school = this.$store.state.index.school;
					//把请求到的数据添加到列表
					var newarr = []
					if(page.num != 1) {
						for(var x in arr) {
							newarr.push(arr[x])
						}
						this.school = this.school.concat(newarr)
					};
					//将数据存储到session中，此处存储应该是字符串格式的
					sessionStorage.setItem("newschool", JSON.stringify(this.school));
					//数据渲染成功后,隐藏下拉刷新的状态
					this.$nextTick(() => {
						this.mescroll.endSuccess(arr.length);
					})
					//				每次上拉将当前页记录到本地存储中
					sessionStorage.setItem("newnum", page.num);
					//获取存储中的数据
					console.log("sessionNum===" + sessionNum)
				}).catch((e) => {
					//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
					this.mescroll.endErr();
					alert("联网失败")
				})
			},
			downCallback() {
				Vue.axios.get("https://oa.fc62.com/api/school/getSchoolList/page/1").then((response) => {
					//请求的列表数据
					let arr = response.data.data;
					this.school.unshift(data)
					// 数据渲染成功后,隐藏下拉刷新的状态
					this.$nextTick(() => {
						this.mescroll.endSuccess() // 结束下拉刷新,无参
					})
				}).catch((e) => {
					//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
					this.mescroll.endErr();
				})

			}
		},
		// 进入路由时,恢复列表状态
		beforeRouteEnter(to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
			next(vm => {
				if(vm.mescroll) {
					// 恢复到之前设置的isBounce状态
					if(vm.mescroll.lastBounce != null) vm.mescroll.setBounce(vm.mescroll.lastBounce)
					// 滚动到之前列表的位置 (注意:路由使用keep-alive才生效)
					if(vm.mescroll.lastScrollTop) {
						vm.mescroll.setScrollTop(vm.mescroll.lastScrollTop)
						setTimeout(() => { // 需延时,因为setScrollTop内部会触发onScroll,可能会渐显回到顶部按钮
							vm.mescroll.setTopBtnFadeDuration(0) // 设置回到顶部按钮显示时无渐显动画
						}, 16)
					}
				}
			})
		},
		// 离开路由时,记录列表状态
		beforeRouteLeave(to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
			if(this.mescroll) {
				this.mescroll.lastBounce = this.mescroll.optUp.isBounce // 记录当前是否禁止ios回弹
				this.mescroll.setBounce(true) // 允许bounce
				this.mescroll.lastScrollTop = this.mescroll.getScrollTop() // 记录当前滚动条的位置
				this.mescroll.hideTopBtn(0) // 隐藏回到顶部按钮,无渐隐动画
			}
			next()
		}

	}
</script>

<style>
	* {
		font-family: "黑体";
	}
	
	.bgc-fff {
		background: #fff;
	}
	
	.seachBox {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 9;
		top: 0;
		height: 1.5rem;
		background: #fff;
	}
	
	.mescroll {
		position: fixed;
		top: 1.5rem;
		bottom: 1rem;
		height: auto;
	}
	
	.bs-example {
		width: 96%;
		margin: 0.2rem auto;
	}
	
	.input-group-addon img {
		width: 0.4rem;
		height: 0.4rem;
		position: absolute;
		top: -0.24rem;
		left: 0.24rem;
	}
	
	.input-group input {
		border: none;
		background-color: #f6f6f6;
		height: 0.7rem;
		border-radius: 4px;
		text-indent: 3em;
	}
	
	span.input-group-addon {
		display: inline-block;
		border: none;
		background-color: #f6f6f6;
		position: relative;
		padding: 0;
	}
	
	.house {
		float: left;
		width: 0.4rem;
		height: 0.4rem;
		margin-top: 0.3rem;
	}
	
	.school_ads {
		float: left;
		margin-left: 0.16rem;
	}
	
	.list-group-item {
		overflow: hidden;
	}
	
	.school_ads p {
		margin: 0;
	}
	
	.p_second {
		color: #999999;
		font-size: 0.28rem;
	}
	
	.p_first {
		font-size: 0.3rem;
	}
	
	.mustInput {
		border: none!important;
		outline: none!important;
		border-width: 0px;
		display: inline-block!important;
		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0)!important;
	}
	
	.school_list {
		padding: 0 0.4rem;
	}
	
	.school_list li {
		height: 1.2rem;
		border-bottom: 1px solid #eee;
	}
	
	a {
		color: #333333;
		text-decoration: none;
	}
	
	#index>div {
		width: 96%;
		margin: 0.2rem auto;
	}
	
	.bs-example>div {
		width: 96%;
		margin: 0.2rem auto;
	}
	
	.bs-example>div input {
		width: 96%;
		margin: 0.2rem auto;
		font-size: 0.3rem;
	}
</style>